import React, { useEffect } from "react";
import { DetailWrapper } from './style' 
import Header from '../../components/Header'
import { connect } from "react-redux";
import { rootState } from '../../store'
import { Dispatch } from "redux";
import Select from '../../components/Select'
import{ getWapListAction } from '../../store/actionCreators'
import WapList from '../../components/WapList'

interface DetailProps{
    banners:any[],
    cartList:any[],
    getWapListActionDispatch:()=>void
}

const Detail:React.FC<DetailProps>=(props)=>{
    const {
        banners,
        cartList
    }=props
    const {
        getWapListActionDispatch
    }=props
    useEffect(()=>{
        getWapListActionDispatch()
    },[])
    return(
        <DetailWrapper>
            <Header banners={banners} value={'搜索你要的车'}/>
            <Select/>
            <WapList cartList={cartList}/>
        </DetailWrapper>
    )
}
const mapStateToProps=(state:rootState)=>({
    banners:state.ranking.bannersData,
    cartList:state.wapList.cartList
})

const mapDispatchToProps=(dispatch:Dispatch)=>({
    getWapListActionDispatch(){
      dispatch(getWapListAction())  
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Detail)